<template>
  <a-modal v-model:visible="visible" title="合同列表" unmount-on-close width="45vw" @close="onClose" @before-ok="onConfirm">
    <a-alert>
      <template #icon> <icon-exclamation-circle /> </template>上传格式：支持jpg、jpeg、png、doc、docx、pdf格式
    </a-alert>
    <div class="contContainer">
      <contract-pane
        :isModel="true"
        class="item"
        v-for="(item, index) in contractList"
        :key="index"
        :contractIndex="index"
        :contractItem="item"
      />
    </div>
  </a-modal>
</template>

<script setup>
  import contractPane from '../contract/contract-pane.vue'
  import { uploadContractApi } from '@/api/order/czsOrder'
  import { handleContracList } from '../../utils'
  import { ref, provide } from 'vue'
  import { Message } from '@arco-design/web-vue'

  const props = defineProps({
    okLoading: Boolean,
  })
  const id = ref('')
  const contractList = ref([])
  const visible = ref(false)

  const open = (record) => {
    id.value = record.id
    contractList.value = handleContracList(record?.contractList)
    visible.value = true
  }
  provide('contractList', contractList)
  const okLoading = ref(false)
  const onClose = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = (done) => {
    let params = {
      id: id.value,
      contractList: contractList.value,
    }
    uploadContractApi(params).then((res) => {
      Message.success(res.message)
      onClose()
    })
    done()
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
  }
  .contContainer {
    padding: 24px 0;
    .item {
      margin-bottom: 10px;
    }
    .fx {
      display: flex;
      align-items: center;
    }
  }
</style>
